<script>
  import $ from 'dfish-widget'
  import {ref} from 'vue'
  import Widget from '../Widget.vue'
	import ProgressDialog from '../examples/ProgressDialog.vue'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Progress',
        remark: '进度条',
        attrs: [{
          name: 'percent',
          type: 'Number',
          remark: '进度',
          option: '从 0 到 100',
        }, {
          name: 'text',
          type: 'String',
          remark: '显示文本',
          option: '',
        }, {
          name: 'range',
          type: 'String',
          remark: `划分进度阶段的数值，用逗号隔开。每个数字都会生成该阶段的样式 "z-数值"，数值范围从 0 到 100。
            例如设置 range: "60,100"，那么进度在 (>=60 && <100) 范围内会存在样式 "z-60"，进度在 100 时会存在样式 "z-100"。`,
          option: '',
        }],
        examples: [{
          remark: '范例',
          type: 'html',
          view: true,
          code: `
            <w-progress :percent="60"></w-progress>
            `
        }, {
          remark: '点击按钮弹出进度框',
          type: 'html',
          view: true,
          code: [
            {
              src: 'index.vue',
              code: `
                <template>
                  <w-buttonbar gap="10">
                    <w-button @click="doExport" text="导出"></w-button>
                  </w-buttonbar>
                </template>
                <${'script'}>
                  import $ from 'dfish-widget'
                  import {ref} from 'vue'
                  import ProgressDialog from './ProgressDialog.vue'
                	
                  export default {	
                    methods: {
                      doExport(e) {
                        const percent = ref(0)
                        const dialog = await $(e).pop(ProgressDialog, {percent})
                        let timer = setInterval(() => {
                          percent.value += 20
                          if (percent.value >= 100) {
                            clearInterval(timer)
                            alert('导出成功')
                            dialog.close()
                          }
                        }, 600)
                      }
                    }
                  }
                </${'script'}>
              `
            },
						{
							src: 'ProgressDialog.vue',
							code: `
                <template>
                  <w-dialog ref="dialog" width="300" height="110" class="progress-dialog" :cover="true">
                    <p>正在导出，请稍候..</p>
                    <w-progress :percent="percent"></w-progress>
                  </w-dialog>
                </template>
                <${'script'}>
                  export default {
                    props: ['percent'],
                    mounted() {
                      this.$refs.dialog.resolve(this.$refs.dialog)
                    }
                  }
                </${'script'}>
                <style>
                  .progress-dialog {
                    background-color: #fff;
                    padding: 10px 20px;
                  }
                </style>`
						}
					],
          comp: {
          	methods: {
              async doExport(e) {
                const percent = ref(0)
                const dialog = await $(e).pop(ProgressDialog, {percent})
                let timer = setInterval(() => {
                  percent.value += 20
                  if (percent.value >= 100) {
                    clearInterval(timer)
                    alert('导出成功')
                    dialog.close()
                  }
                }, 600)
              }
          	}
          }
        }]
      }
    }
  }
</script>

<style>
</style>
